<template>
    <NavbarComponent></NavbarComponent>
    <div class="category-page">
      <h1>当前分类：{{ currentCategory }}</h1>
      
      <!-- 商品展示区 -->
      <section class="products">
        <div v-if="loading" class="loading">加载中...</div>
        <div v-else-if="error" class="error">{{ error }}</div>
        <div v-else>
          <div class="product-grid">
            <div
              class="product-card"
              v-for="product in products"
              :key="product.productId"
              @click="openProductDetail(product.productId)"
            >
              <div class="image-container">
                <img :src="'http://localhost:8092' + product.images" alt="Product Image" />
              </div>
              <div class="card-content">
                <h3 class="product-title">{{ product.productName }}</h3>
                <p class="product-description">{{ product.introduction }}</p>
                <div class="product-footer">
                  <span class="product-price">¥{{ product.price }}</span>
                  <span class="product-wants">{{ product.wants || 0 }}人想要</span>
                </div>
              </div>
            </div>
          </div>
          <div v-if="products.length === 0" class="no-data">
            该分类下暂无商品
          </div>
        </div>
      </section>
      <!-- 新增右侧侧边栏 -->
    <RightSidebar />
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { useRouter,useRoute } from 'vue-router'
  import axios from 'axios'
  import RightSidebar from '@/components/components/RightSidebar.vue'
import NavbarComponent from '@/components/components/NavbarComponent.vue'
  const route = useRoute() // 获取当前路由信息
  const router = useRouter() // 获取路由器实例
  const currentCategory = ref('')
  const products = ref([])
  const loading = ref(false)
  const error = ref('')
  
  // 获取分类商品
  const fetchProducts = async (category) => {
    try {
      loading.value = true
      error.value = ''
      const response = await axios.get('http://localhost:8092/product/getProductsByCategory', {
        params: { category }
      })
      
      if (response.data.code === 200) {
        products.value = (response.data.data || []).filter(
        product => product.approvalStatus !== 0
      )
      } else {
        error.value = response.data.message || '获取商品失败'
      }
    } catch (err) {
      error.value = `请求失败：${err.message}`
      console.error('获取分类商品失败:', err)
    } finally {
      loading.value = false
    }
  }
  
  // 打开商品详情
  const openProductDetail = (productId) => {
    const routeData = router.resolve({
      path: '/product',
      query: { productId }
    })
    window.open(routeData.href, '_blank')
  }
  
  onMounted(() => {
    const category = route.query.category || ''
    currentCategory.value = category || '未知分类'
    if (category) {
      fetchProducts(category)
    }
  })
  </script>
  
  <style scoped>
  .category-page {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  h1 {
    color: #2c3e50;
    border-bottom: 2px solid #f1c40f;
    padding-bottom: 10px;
    margin-bottom: 30px;
  }
  
  /* 商品展示样式（与Home.vue保持一致） */
  .products {
    padding: 40px 20px;
  }
  
  .loading, .error, .no-data {
    text-align: center;
    font-size: 16px;
    padding: 40px 0;
  }
  
  .error {
    color: #e74c3c;
  }
  
  .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    padding: 20px;
  }
  
  .product-card {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
    cursor: pointer;
  }
  
  .product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  }
  
  .image-container {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
  }
  
  .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  
  .product-card:hover img {
    transform: scale(1.05);
  }
  
  .card-content {
    padding: 18px;
  }
  
  .product-title {
    font-size: 16px;
    color: #34495e;
    margin: 0 0 12px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  
  .product-description {
    font-size: 14px;
    color: #7f8c8d;
    line-height: 1.5;
    margin: 0 0 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  
  .product-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .product-price {
    color: #ff5500;
    font-size: 18px;
    font-weight: bold;
  }
  
  .product-wants {
    color: #95a5a6;
    font-size: 13px;
  }
  
  @media (max-width: 768px) {
    .product-grid {
      grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
      gap: 20px;
      padding: 10px;
    }
    
    .image-container {
      height: 200px;
    }
  }
  </style>